<template>
  <div>
    <div class="back">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <span v-html="userName.length <= 3? userName: userName.substring(0,2)+'*'"></span>
          </template>
          <div>
            <div>
              <a href="javascript:void(0);">用户信息</a>
            </div>
            <div>
              <a href="javascript:void(0);" @click="changePwd=true">修改密码</a>
            </div>
            <div>
              <a href="javascript:void(0);" @click="logout">退出登录</a>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div>
      <el-dialog
        title="修改密码"
        :visible.sync="changePwd"
        width="40%">

        <el-form label-width="100px" :model="userPwd" :rules="rule">
          <el-form-item label="原密码：" prop="pwd">
            <el-input placeholder="请输入原密码" show-password v-model="userPwd.pwd"></el-input>
          </el-form-item>

          <el-form-item label="新密码：" prop="newPwd">
            <el-input placeholder="请输入新密码" show-password v-model="userPwd.newPwd"></el-input>
          </el-form-item>

          <el-form-item label="确认密码：" prop="rePwd">
            <el-input placeholder="请确认密码" show-password v-model="userPwd.rePwd"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary">提交</el-button>
          <el-button type="info" @click="changePwd=false">关闭</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {mapState} from "vuex";
import manage from "@/service/manage";
import cookieStore from "@/cookieStore";
export default {
  name: "userInfor",
  data() {

    let checkPwd = (rule, value, callback) => {
      if(value != this.userPwd.newPwd){
        return callback(new Error("两个密码不一致"));
      }else{
        callback();
      }
    }

    return {
      changePwd: false,
      userPwd: {
        pwd: "",
        newPwd: "",
        rePwd: ""
      },

      rule: {
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],

        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],

        rePwd: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: checkPwd, trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    logout(){
      manage.logout().then(res => {
        let data = res.data;
        if(data.code === 200){
          cookieStore.removeRole();
          cookieStore.removeToken();
          this.$router.push("/");
        }
      });
    }
  },

  computed: {
    ...mapState(['userName'])
  }

}
</script>

<style scoped>
  .back {
    width: 60px;
    position: absolute;
    right: 30px;
    top: 30px;
  }

  a {
    text-decoration: none;
    color: #409EFF;
  }

  a:visited {
    color:  #409EFF;
  }

  a:hover {
    color: red;
  }

  a:active {
    color: #67C23A;
  }

</style>